<template>
  <div>
    <div style="padding: 15px;">
      <button-tab v-model="demo01"> <!-- 同时设置v-model="demo01" -->
        <button-tab-item >
          <router-link to="/today">今日</router-link>
        </button-tab-item>
        <button-tab-item selected>
          <router-link to="/week">本周</router-link>
        </button-tab-item>
        <button-tab-item >
          <router-link to="/week">本月</router-link>
        </button-tab-item>
      </button-tab>

      <br>
      <divider>使用 v-model 设置当前选中项</divider>
      <br>
      <button-tab v-model="demo01"> <!-- 必须在父级设置v-model才能生效 -->
        <button-tab-item @on-item-click="consoleIndex()">文章</button-tab-item>
        <button-tab-item @on-item-click="consoleIndex()">产品</button-tab-item>
      </button-tab>
      <br>

      <br>
      <divider>红点</divider>
      <br>
      <button-tab>
        <button-tab-item selected>全部消息</button-tab-item>
        <button-tab-item><span class="vux-reddot-s">新消息</span></button-tab-item>
      </button-tab>
    </div>
  </div>
</template>

<script>
  import { ButtonTab, ButtonTabItem, Divider } from 'vux'
  export default {
    name: 'hello',
    components: {
      ButtonTab,
      ButtonTabItem,
      Divider
    },
    methods: {
      consoleIndex () {
        console.log('click demo01', this.demo01)
      }
    },
    data () {
      return {
        demo01: 0
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
